<template>
  <div class="list">
    <div class="item" v-for="book in bookList" :key="book.bookId">
      <div class="cover">
        <router-link class="link" :to="'book/detail/'+book.bookId">
          <el-image class="image" :src="baseImage+book.cover" fit="fill"></el-image>
        </router-link>
      </div>
      <div class="info">
        <div class="title"><h3 :title="book.bookName"><router-link :to="'book/detail/'+book.bookId">{{book.bookName}}</router-link></h3></div>
        <div class="author">
          <p>作者：{{book.authorName || book.author.nickname}}</p>
        </div>
        <div class="status">
          <el-tag type="warning" effect="light" v-if="book.bookStatus === 1">连载中</el-tag>
          <el-tag type="success" effect="light" v-else>已完结</el-tag>
        </div>
        <div class="category">
          <el-tag class="category-tag" type="primary" v-for="category in book.categoryList" :key="category.categoryId">{{category.categoryName}}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BookList',
  props: {
    bookList: {
      type: Array
    }
  },
  data () {
    return {
      baseImage: process.env.VUE_APP_URL
    }
  }
}
</script>
<style scoped lang="scss">
.list{
  width: 96%;
  margin: 0 auto;
  padding: 10px;
  .item{
    display: flex;
    height: 200px;
    background-color: white;
    margin: 10px auto;
    .cover{
      width: 30%;
      height: 190px;
      .link{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .image{
          height: 90%;
          width: 90%;
        }
      }
    }
    .info{
      width: 70%;
      &>div{
        height: 45px;
      }
      .title{
        display: flex;
        align-items: center;
        h3{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          a{
            color: black;
            text-decoration: none;
            &:hover{
              color: #42b983;
            }
          }

        }
      }
      .category-tag{
        margin-right: 10px;
      }
    }
  }
}
</style>
